<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>订单列表</title>
	<link type="text/css" th:href="@{/html/css/bootstrap.min.css}" rel="stylesheet" />
	<script type="text/javascript" th:src="@{/html/js/jquery-1.12.4.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/vue.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/axios.min.js}"></script>
	<style type="text/css">
		.mycss{
			color: red;
			background: #eee;
		}
	</style>
</head>
<body>
	<div id="app" class="container-fluid" style="margin-top: 10px;">
		<caption>
			<button v-on:click="list(0)">刷新</button>
			<input id="username" type="hidden" th:value="${session.user.username}" />
		</caption>
		<table class="table">
			<thead>
				<tr>
					<th>订单号</th>
					<th>商品</th>
					<th>单价</th>
					<th>数量</th>
					<th>总价</th>
					<th>订单时间</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in pager.content">
					<td>{{item.ono}}</td>
					<td>{{item.gname}}</td>
					<td>&yen;{{item.gsale}}</td>
					<td>{{item.gcount}}</td>
					<td>&yen;{{item.omoney}}</td>
					<td>{{item.otime}}</td>
					<td v-if="item.ostatus==503">下单</td>
					<td>
						<button v-on:click="info(item)">详情</button>
					</td>
				</tr>
			</tbody>
			<tfoot>
                <tr>
                    <td colspan="8">
                        <ul class="pagination">
                            <li><a href="#" @click.prevent="list(0)">&laquo;</a></li>
                            <li><a href="#" @click.prevent="list(pager.pageable.pageNumber-1)">&larr;</a></li>
                            <li v-for="n in end-begin+1" :class="pager.pageable.pageNumber==begin+n-2?'active':''">
                                <a href="#" @click.prevent="list(begin+n-2)">{{begin+n-1}}</a>
                            </li>
                            <li><a href="#" @click.prevent="list(pager.pageable.pageNumber+1)">&rarr;</a></li>
                            <li><a href="#" @click.prevent="list(pager.totalPages-1)">&raquo;</a></li>
                        </ul>
                    </td>
                </tr>
            </tfoot>
		</table>
		<div class="modal" id="mymodal">
        	<div class="modal-dialog" data-backdrop="static">
	             <div v-if="item!=null" class="modal-content">
	                <div class="modal-header">
	                	<button class="close" data-dismiss="modal">&times;</button>
	                	<h4>订单信息</h4>
	                </div>
					<div class="modal-body" style="height: 350px;" >
						<form class="form-horizontal text-primary">
							<div class="form-group col-sm-12">
								<strong>订单号:</strong>{{item.ono}}
							</div>
							<div class="form-group col-sm-12">
								<strong>店铺:</strong>
								<img class="img-rounded" style="height: 40px;" v-bind:src="'/mymall/logo/'+item.user" />
								{{item.stitle}}
							</div>
							<div class="form-group col-sm-12">
								<strong>商品:</strong><img class="img-rounded" style="height: 80px;" v-bind:src="'/mymall/picture/'+item.gno" />
								{{item.gname}} &yen;{{item.gsale}} × {{item.gcount}} = &yen;{{item.omoney}}
							</div>
							<div class="form-group col-sm-12">
								<strong>时间:</strong>{{item.otime}} {{item.odesc}}
							</div>
							<div class="form-group col-sm-12">
								<strong>发件:</strong>{{item.senduser}} {{item.sendphone}} 
							</div>
							<div class="form-group col-sm-12">
								<strong>收件:</strong>{{item.receiveuser}} {{item.receivephone}} 
							</div>
							<div class="form-group col-sm-12">
								<strong>地址:</strong>{{item.receiveaddr}}
							</div>
						</form>
	                 </div>
	             </div>
	        </div>
        </div>
    </div>
    <script type="text/javascript">
    	new Vue({
    		el:'#app',
    		data:{
    			serviceUrl:'http://localhost:8001/myservice',
    			page:0,
    			size:10,
		        step:10,
    			begin:0,
                end:0,
    			pager:{},
    			item:null
    		},
    		beforeMount:function(){
    			this.list(this.page);
    		},
    		methods:{
    			list:function(page){
    				var self = this;
    				self.page = page<0?0:page;
    				var url = self.serviceUrl+"/shop/order/list/"+
    					self.page+"/"+self.size+"/"+$("#username").val();
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.pager = res.data;
    					self.begin = Math.floor(self.page/self.step)*self.step+1;
                        if(self.pager.last){
                            self.end = self.pager.totalPages;
                        }else{
                            self.end = Math.floor(self.page/self.step)*self.step+self.step;
                        }
    				});
    			},
    			info:function(item){
    				this.item=item;
    				$("#mymodal").modal("show");
    			}
    		}
    	});
    </script>
</body>
</html>